<template>
  <van-cell clickable @click="checked = !checked">
    <template #icon>
      <van-image round width="30px" height="30px" fit="contain" error-icon="manager cspg-color-yellow" loading-icon="manager cspg-color-yellow" :src='userImage' />
    </template>
    <template #default>
      <van-row>
        {{person.user_name}}
      </van-row>
      <van-row class="van-ellipsis">
        <span>{{person.department_displaypath}}</span>
      </van-row>
    </template>
    <template #right-icon>
      <van-checkbox v-model="checked" :name="person"/>
    </template>
  </van-cell>
</template>

<script>
export default {
  name: 'CardPerson',
  props: ['person', 'selected'],
  data () {
    return {
      userImage: this.person.avatar,
      checked: false
    }
  },
  mounted () {
    let index = this.selected.findIndex((item) => {
      return item.user_id === this.person.user_id
    })
    if (index > -1) {
      this.checked = true
    } else {
      this.checked = false
    }
  },
  watch: {
    checked: function () {
      if (this.checked) {
        let index = this.selected.findIndex((item) => {
          return item.user_id === this.person.user_id
        })
        if (index < 0) {
          this.selected.push(this.person)
        }
      } else {
        let index = this.selected.findIndex((item) => {
          return item.user_id === this.person.user_id
        })
        if (index > -1) {
          this.selected.splice(index, 1)
        }
      }
    }
  }
}
</script>

<style scoped lang="less">
  .van-cell {
    font-size: 12px;
    padding: 5px 16px;
    .van-row {
      padding: 0px 10px;
      line-height: 15px;
    }
    span {
      font-size: 10px;
      color: #969799;
    }
  }
</style>
